<!DOCTYPE html>

<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>登录</title>
	<link rel="stylesheet" href="lib/plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="lib/css/login.css" />
</head>

<body class="beg-login-bg">
	<div class="beg-login-box">
		<header>
			<h1>后台登录</h1>
		</header>
		<div class="beg-login-main">
			<form action="lib/manage/login" class="layui-form" method="post"><input name="__RequestVerificationToken" type="hidden" value="fkfh8D89BFqTdrE2iiSdG_L781RSRtdWOH411poVUWhxzA5MzI8es07g6KPYQh9Log-xf84pIR2RIAEkOokZL3Ee3UKmX0Jc8bW8jOdhqo81"
				/>
				<div class="layui-form-item">
					<label class="beg-login-icon">
                        <i class="layui-icon">&#xe612;</i>
                    </label>
					<input type="text" name="username" lay-verify="userName" autocomplete="off" placeholder="这里输入登录名" class="layui-input">
				</div>
				<div class="layui-form-item">
					<label class="beg-login-icon">
                        <i class="layui-icon">&#xe642;</i>
                    </label>
					<input type="password" name="password" lay-verify="password" autocomplete="off" placeholder="这里输入密码" class="layui-input">
				</div>
				<div class="layui-form-item">
					<label class="beg-login-icon">
                        <i class="layui-icon">&#xe642;</i>
                    </label>
					<div class="beg-pull-left">
						<input type="text" id="captcha" name="captcha" lay-verify="captcha" autocomplete="off" placeholder="这里输入验证码" class="layui-input">
					</div>
					<div class="beg-pull-right">
						<img id="captchaImg" width="78px" height="38px" />
					</div>
				</div>
				<div class="layui-form-item">
					<div class="beg-pull-left beg-login-remember">
						<label>记住帐号？</label>
						<input type="checkbox" name="rememberMe" value="true" lay-skin="switch" checked title="记住帐号">
					</div>
					<div class="beg-pull-right">
						<button class="layui-btn layui-btn-primary" lay-submit lay-filter="login">
                            <i class="layui-icon">&#xe650;</i> 登录
                        </button>
					</div>
					<div class="beg-clear"></div>
				</div>
			</form>
		</div>
		<footer>
			<p>Beginner © www.zhengjinfan.cn</p>
		</footer>
	</div>
	<script type="text/javascript" src="lib/plugins/layui/layui.js"></script>
	<script>
			var apiUrl = 'http://localhost:8080';
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					$ = layui.jquery,
					form = layui.form();
					
				form.on('submit(login)',function(data){
					//var param = JSON.stringify(data.field);
					//location.href='index.html';
					var captchaKey = localStorage.getItem('captchaKey');
					data.field.captchaKey = captchaKey;
					$.ajax({
						type: 'POST',
						url: apiUrl + '/sys/login',
						data: data.field,
						success: function(msg){
							//alert(JSON.stringify(msg));
							console.log(msg);
							if(msg.success){
								location.href='index.html';
							}else{
								layer.msg(msg.msg);
								//$('#captcha').val('');
								var url = apiUrl + '/captcha.jpg/'+ captchaKey + '/' + Math.random();
								$('#captchaImg').attr('src',url);
							}
						}
					});
					return false;
				});
			});
			layui.use(['jquery', 'layer'], function(){ 
				var $ = layui.jquery,layer = layui.layer;
				$('#captchaImg').click(function(){
					var captchaKey = localStorage.getItem('captchaKey');
					var url = apiUrl + '/captcha.jpg/'+ captchaKey + '/' + Math.random();
					$('#captchaImg').attr('src',url);
				});
				$(function(){
					//localStorage.removeItem('captchaKey');
					var captchaKey = localStorage.getItem('captchaKey');
					if(!captchaKey){
						$.ajax({
							type: 'GET',
							url: apiUrl + '/getCaptchaKey',
							success: function(msg){
								console.log(msg.captchaKey);
								localStorage.setItem("captchaKey", msg.captchaKey);
								var url = apiUrl + '/captcha.jpg/'+ msg.captchaKey + '/' + Math.random();
								$('#captchaImg').attr('src',url);
							}
						});
					}else{
						var url = apiUrl + '/captcha.jpg/'+ captchaKey + '/' + Math.random();
						$('#captchaImg').attr('src',url);	
					}
				});
			});
		</script>
</body>

</html>